<template>
    <div class="vuex space-full">
        <div class="vuex-item">
            <span>假设苹果原价为：</span>
            <span>{{price}}元/斤</span>
            <el-button type="primary" icon="el-icon-plus" circle @click="changePrice(1)"></el-button>
        </div>
        <div class="vuex-item">
            <span>假设卖出：</span>
            <span>{{sold}}斤</span>
            <el-button type="primary" icon="el-icon-plus" circle @click="changeSold(1)"></el-button>
        </div>
        <div class="vuex-item">
            <span>合计为：</span>
            <span>{{price}} * {{sold}} = {{price*sold}}元</span>
        </div><hr/>

        <div class="vuex-item">
            <span>假设投资金额为：</span>
            <span>{{principal}}元</span>
            <el-input v-model="inputMoney" placeholder="请输入投资额" @input="setInvest"></el-input>
        </div>
        <div class="vuex-item">
            <span>利率为：</span>
            <span>{{income*100}}%</span>
            <el-input v-model="inputIncome" placeholder="请输入利率" @input="setIncome"></el-input>
        </div>
        <div class="vuex-item">
            <span>收益为：</span>
            <span>{{principal}} * {{income}} = {{principal*income}}</span>
        </div>
    </div>
</template>
<script>
// https://www.jb51.net/article/191734.htm
import { mapGetters } from 'vuex'
export default {
  name: 'Vuex',
  computed: {
    ...mapGetters(['price', 'sold', 'principal', 'income'])
  },
  methods: {
    changePrice (num) {
      this.$store.dispatch('apple/changePrice', num)
    },
    changeSold (num) {
      this.$store.dispatch('apple/changeSold', num)
    },
    setInvest () {
      this.$store.dispatch('invest/setPrincipal', Number(this.inputMoney))
    },
    setIncome () {
      this.$store.dispatch('invest/setIncom', Number(this.inputIncome))
    }
  },
  data: () => ({
    inputMoney: '',
    inputIncome: ''
  })
}
</script>
<style lang="less" scoped>
.vuex{
    display: flex;
    flex-direction: column;
    .vuex-item{
        margin-bottom: 20px;
        .el-button{
            margin-left: 10px;
        }
    }
    hr{margin-bottom: 20px;}
    .el-input{
      width: 200px;
      margin-left: 20px;
    }
}
</style>
